<template>
  <div class="app-container">
    <!-- *************************************搜索区************************************* -->
    <!-- 分类 -->
    <el-form v-show="showSearch" :model="queryParams" ref="queryForm" size="small" :inline="true">
      <!-- sku编号 -->
      <el-form-item :label="$t('sku编号')" prop="skuNo">
        <el-input v-model="queryParams.skuNo" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <!-- 供应商名称 -->
      <el-form-item :label="$t('供应商名称')" prop="distrName">
        <el-input v-model="queryParams.distrName" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <!-- 中文名 -->
      <el-form-item :label="$t('中文名')" prop="skuNameCn">
        <el-input v-model="queryParams.skuNameCn" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <!-- 日文名 -->
      <el-form-item :label="$t('日文名')" prop="skuNameJp">
        <el-input v-model="queryParams.skuNameJp" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
          <!-- 搜索 -->
          {{ $t('搜索') }}
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">
          <!-- 重置 -->
          {{ $t('重置') }}
        </el-button>
      </el-form-item>
    </el-form>
    <!-- 增删改查 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5"> </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
    </el-row>
    <el-table :height="calTableHeight()" v-loading="loading" ref="TableRef" :data="tableData" row-key="menuId">
      <!-- 租户类型 1-商家 2-供应商 -->
      <el-table-column :label="$t('租户类型')" align="center" show-overflow-tooltip prop="type">
        <template slot-scope="{ row }">
          <span v-if="row.type == 1">
            <!-- 商家 -->
            {{ $t('商家') }}
          </span>
          <span v-if="row.type == 2">
            <!-- 供应商 -->
            {{ $t('供应商') }}
          </span>
        </template>
      </el-table-column>
      <!-- 商家ID -->
      <el-table-column align="center" show-overflow-tooltip prop="distrId" :label="$t('商家ID')" />
      <!-- 商家名称 -->
      <el-table-column align="center" show-overflow-tooltip :label="$t('商家名称')" prop="name" />
      <!-- 商家地址 -->
      <el-table-column width="150" align="center" show-overflow-tooltip prop="address" :label="$t('商家地址')" />
      <!-- 商家电话 -->
      <el-table-column width="150" align="center" show-overflow-tooltip :label="$t('商家电话')" prop="tel" />
      <!-- 商家微信 -->
      <el-table-column align="center" show-overflow-tooltip :label="$t('商家微信')" prop="wechat" />
      <!-- 云审批自动通过 -->
      <el-table-column width="150" align="center" show-overflow-tooltip :label="$t('云审批自动通过')" prop="autoVerify">
        <template slot-scope="{ row }">
          <span v-if="row.type == 2">
            <!-- {{ row.autoVerify == 0 ? "手动通过" : "自动通过" }} -->
            {{ row.autoVerify == 0 ? $t('手动通过') : $t('自动通过') }}
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <!-- 利润倍率 -->
      <el-table-column align="center" show-overflow-tooltip :label="$t('利润倍率')" prop="profitRate" />
      <!-- 云申请限制 -->
      <el-table-column width="150" align="center" show-overflow-tooltip :label="$t('云申请限制')" prop="applyRestrict">
        <template slot-scope="{ row }">
          <span v-if="row.type == 1">
            {{ row.applyRestrict == 0 ? $t('限制') : $t('不限') }}
          </span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <!-- 商家oicq -->
      <el-table-column align="center" show-overflow-tooltip :label="$t('商家oicq')" prop="oicq" />
      <!-- 商家负责人 -->
      <el-table-column
        width="150"
        align="center"
        show-overflow-tooltip
        :label="$t('商家负责人')"
        prop="responsibleUser"
      />
      <!-- 商家负责人电话 -->
      <el-table-column
        width="150"
        align="center"
        show-overflow-tooltip
        :label="$t('商家负责人电话')"
        prop="responsibleTel"
      />
      <!-- 商家营业时间 -->
      <el-table-column align="center" :label="$t('商家营业时间')" show-overflow-tooltip prop="operateTime" />
      <!-- 商家手续费 -->
      <el-table-column width="150" align="center" :label="$t('商家手续费')" show-overflow-tooltip prop="handlingFee" />
      <!-- 商家级别 1-一级 2-二级 .... -->
      <el-table-column width="150" align="center" show-overflow-tooltip :label="$t('商家级别')" prop="level">
        <template slot-scope="{ row }">
          <span v-if="row.level == 1">
            <!-- 一级 -->
            {{ $t('一级') }}
          </span>
          <span v-if="row.level == 2">
            <!-- 二级 -->
            {{ $t('二级') }}
          </span>
        </template>
      </el-table-column>
      <!-- 备注 -->
      <el-table-column align="center" show-overflow-tooltip width="200" :label="$t('备注')" prop="remark" />
      <!-- 操作 -->
      <el-table-column :label="$t('操作')" align="center" fixed="right" :width="calWidth(200, 250, 200)">
        <template slot-scope="{ row }">
          <el-button type="text" size="small" @click="handleEdit(row)" v-hasPermi="['distribution:express:edit']">
            <!-- 编辑 -->
            {{ $t('编辑') }}
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="handleEditmultiply(row)"
            v-hasPermi="['distribution:distributor:profitEdit']"
          >
            <!-- 编辑利润倍率 -->
            {{ $t('编辑利润倍率') }}
          </el-button>
          <el-button type="text" size="small" @click="handleEdit(row, false)">
            <!-- 查看运费 -->
            {{ $t('查看') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="pageTotal > 0"
      :total="pageTotal"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 新增编辑 -->
    <AddExpress :FormData="cunrentForm" ref="AddExpress"></AddExpress>
  </div>
</template>

<script>
import { list, profitEdit } from '@/api/platform/express'
import AddExpress from './component/addExpress.vue'
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  components: {
    AddExpress,
  },
  data() {
    return {
      showSearch: false,
      cunrentForm: {},
      /**
       * 新增
       */
      showAdd: false,
      /**
       * 导入组件的显示与隐藏
       */
      showImport: false,

      tableData: [],
      /**数据总条数 */
      pageTotal: 0,
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: 1,
      },
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /**编辑利润倍率 */
    handleEditmultiply(data) {
      this.$prompt('', this.$t('编辑利润倍率'), {
        inputPattern: /^[1-9]\d*(\.\d+)?$/,
        inputErrorMessage: this.$t('请不要输入除数字和小数以外字符'),
        inputValue: Number(data.profitRate),
      })
        .then(({ value }) => {
          profitEdit({ id: data.id, profitRate: value }).then((res) => {
            const { code, data, msg } = res
            if (code === 200) {
              this.$message({ type: 'success', message: msg })
              this.getList()
            }
          })
          this.getList()
        })
        .catch((e) => e)
    },
    /**
     * 编辑商家
     * @param {*} row
     * @param {*} canEdit  是否能修改
     */
    handleEdit(row, canEdit = true) {
      this.$refs.AddExpress.showEdit = true
      this.$refs.AddExpress.FormData = row
      this.$refs.AddExpress.canEdit = canEdit
    },

    /** 查询菜单列表 */
    getList() {
      this.loading = true
      list(this.queryParams).then((res) => {
        this.tableData = res.rows
        this.pageTotal = res.total
        this.loading = false
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      Object.keys(this.queryParams).forEach((key) => {
        this.queryParams[key] = ''
      })
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.queryParams.type = 1
      this.getList()
    },
  },
}
</script>
<style lang="scss"></style>
